<!-- 首页 -->
<template>
  <div class="content">
    <div class="top">
      <div class="title"><span>大学生志愿者活动</span></div>

      <div class="upWard">
        <div class="profile">
          <div>
            <img src="../assets/images/用户头像.svg" />
            <span>李华</span>
          </div>
          <div><img src="../assets/images/右箭头.svg" /></div>
        </div>

        <div class="nav">
          <div>认领活动</div>
          <div>爱心报表</div>
          <div>服务纪实</div>
          <div>我的服务</div>
        </div>
      </div>
    </div>

    <div class="center">
      <div class="more">
        <div><span>志愿活动</span></div>
        <div><span>查看更多</span><img src="../assets/images/右箭头.svg" /></div>
      </div>
      <ul>
        <li>666</li>
        <li>666</li>
        <li>666</li>
        <li>666</li>
        <li>666</li>
      </ul>
    </div>
  </div>
</template>

<style scoped>
.content {
  display: flex;
  flex-direction: column;
  width: 100vw;
}

.top .title {
  color: #fff;
  background-color: darkslategrey;
  width: 100%;
  font-size: 1.25rem;
  text-align: center;
  padding-bottom: 2.5rem;
}

.top .title span {
  display: block;
  padding: 1rem;
}

.top .profile {
  border-radius: 10px;
  margin: 0 0.63rem 1rem 0.63rem;
  padding: 0.63rem;
  font-size: 1.13rem;
  background-color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #333;
}

.profile div:first-child img {
  background-color: #333;
  border-radius: 50%;
  padding: 0.31rem;
  width: 50px;
  height: 50px;
}

.profile div:first-child {
  display: flex;
  align-items: center;
}

.profile div:last-child {
  font-size: 1.25rem;
}

.profile div:last-child img {
  border-radius: 50%;
  padding: 0.31rem;
  width: 1.56rem;
  height: 1.56rem;
}

.profile span {
  display: block;
  padding: 0.63rem;
}

.top .upWard {
  margin-top: -2.5rem;
}

.nav {
  border-radius: 10px;
  margin: 1rem 0.63rem 1rem 0.63rem;
  font-size: 1.13rem;
  display: flex;
  flex-direction: row;
  justify-content: center;
  background-color: #fff;
  color: #333;
}

.nav div {
  padding: 0.63rem;
}

.center {
  flex: 1;
  font-size: 1.13rem;
  background-color: #fff;
  padding: 1.26rem;
}

.center .more {
  display: flex;
  justify-content: space-between;
  padding-bottom: 0.63rem;
}

.center .more div:last-child {
  display: flex;
  align-items: center;
}

.center img {
  width: 1.25rem;
  height: 1.25rem;
}
</style>
